import React from 'react'
import { connect } from 'react-redux'
import { actionCreators } from '../store'
import { Link } from 'react-router-dom'
import {
    ListItem,
    ListInfo,
    LoadMore
} from '../style'

class List extends React.PureComponent {
    render() {
        const { list, getMoreList, page } = this.props
        return (
            <div>
                {
                    list.map((item, index) => (
                        <Link key={index} to={'/detail/' + item.get('id')}>
                            {/* 使用link  to  避免一次html请求、提高加载速度 */}
                            <ListItem >
                                <img
                                    className='pic'
                                    alt=''
                                    src={item.get('imgUrl')}
                                />
                                <ListInfo>
                                    <h3 className='title'>{item.get('title')}</h3>
                                    <p className='desc'>
                                        {item.get('desc')}
                                    </p>
                                </ListInfo>
                            </ListItem>
                        </Link>                      
                    ))
                }
                <LoadMore onClick={() => getMoreList(page)}>加载更多</LoadMore>
            </div>
            
        )
    }
}

const mapState = (state) => ({
    list: state.get('home').get('articleList'),
    page: state.get('home').get('articlePage')
})

const mapDispatch = (dispatch) => {
    return {
        getMoreList(page) {
            dispatch(actionCreators.getMoreList(page))
        }
    }  
}

export default connect(mapState, mapDispatch)(List)